<template>
  <div class="moments-container">
    <!-- 顶部 -->
    <div class="moments-header">
      <div class="header-bg">
        <img src="https://images.unsplash.com/photo-1519608487953-e999c86e7455?w=400&h=200&fit=crop" alt="背景" />
      </div>
      <!-- 顶部操作 -->
      <div class="header-actions">
        <button class="header-btn" title="返回" @click="goBack">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path d="M15 18L9 12L15 6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
        </button>
        <button class="header-btn" title="相机" @click="goToPost">
          <i>📷</i>
        </button>
      </div>
    </div>

    <!-- 用户信息（位于朋友圈列表上方）-->
    <div class="user-info">
      <img :src="avatar" alt="头像" class="avatar" />
      <span class="username">{{userName}}</span>
    </div>

    <!-- 未读消息提示 -->
    <div v-if="unreadMessage.count>0" class="unread-message-tip" @click="handleUnreadMessageClick">
      <div class="message-avatar">
        <img :src="unreadMessage.avatar" :alt="userName" />
      </div>
      <div class="message-content">
        <span class="message-text">{{ unreadMessage.count }}条新消息</span>
      </div>
      <div class="message-arrow">›</div>
    </div>

    <!-- 朋友圈列表 -->
    <div class="moments-list">
      <div v-for="moment in moments" :key="moment.id" class="moment-item" >
        <!-- 用户信息 -->
        <div class="moment-user" @click="toUserPage(moment.user.id)">
          <img :src="moment.user.avatar" :alt="moment.user.name" class="user-avatar" />
          <div class="user-details">
            <div class="user-name">{{ moment.user.name }}</div>
            <!-- 文字内容 -->
            <div v-if="moment.text" class="text-content">{{ moment.text }}</div>
          </div>
        </div>

        <!-- 内容 -->
        <div class="moment-content">
          
          <!-- 图片 -->
          <div v-if="moment.images && moment.images.length > 0" class="images-grid" :class="getImageGridClass(moment.images.length)">
            <el-image 
              v-for="(image, index) in moment.images" 
              :key="index" 
              :src="image" 
              class="image-item"
              fit="cover"
              :alt="`图片${index + 1}`"
              @click="previewImages(moment.images, index)"
            />
          </div>

          <!-- 视频 -->
          <div v-if="moment.video" class="video-content">
            <video :src="moment.video" controls :poster="moment.videoPoster"></video>
          </div>

          <!-- 位置 -->
          <div v-if="moment.location" class="location-info">
            <i class="location-icon">📍</i>
            <span>{{ moment.location }}</span>
          </div>
        </div>

        <!-- 时间和操作 -->
        <div class="moment-footer">
          <div class="moment-time">{{ moment.time }}</div>
          <div class="moment-actions">
            <button class="action-btn" @click="toggleLike(moment)">
              <el-icon class="like-icon" :class="{ liked: moment.isLiked }">
                <svg v-if="moment.isLiked" viewBox="0 0 1024 1024" fill="currentColor">
                  <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z"/>
                </svg>
                <svg v-else viewBox="0 0 1024 1024" fill="currentColor">
                  <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z"/>
                </svg>
              </el-icon>
            </button>
            <button class="action-btn" @click="showCommentInput(moment)">
              <el-icon class="comment-icon">
                <svg viewBox="0 0 1024 1024" fill="currentColor">
                  <path d="M573 421c-23.1 0-41 17.9-41 40s17.9 40 41 40c21.1 0 39-17.9 39-40s-17.9-40-39-40zM293 421c-23.1 0-41 17.9-41 40s17.9 40 41 40c21.1 0 39-17.9 39-40s-17.9-40-39-40z"/>
                  <path d="M894 345c-48.1-66-115.3-110.1-189-130v.1c-17.1-19-36.4-36.5-58-52.1-163.7-119-393.5-82.7-513 81-96.3 133-92.2 311.9 6 439l.8 132.6c0 3.2.5 6.4 1.5 9.4 5.3 16.9 23.3 26.2 40.1 20.9L309 806c33.5 11.9 68.1 18.7 102.5 20.6l-.5.4c89.1 64.9 205.9 84.4 313 49l127.8 41.4c3.2 1 6.5 1.6 9.9 1.6 17.7 0 32-14.3 32-32V753.8c88.1-119.6 90.4-284.9 1-408.8zM323 735l-12-5-99 31-1-104-8-9c-84.6-103.2-90.2-251.9-11-361 96.4-132.2 281.2-161.4 413-66 132.2 96.1 161.5 280.6 66 412-80.1 109.9-223.5 139.5-348 102z"/>
                </svg>
              </el-icon>
            </button>
          </div>
        </div>

        <!-- 点赞 -->
        <div v-if="moment.likes && moment.likes.length > 0" class="likes-section">
          <el-icon class="likes-display-icon">
            <svg viewBox="0 0 1024 1024" fill="currentColor">
              <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z"/>
            </svg>
          </el-icon>
          <div class="likes-text">
            <span v-for="(like, index) in moment.likes" :key="like.id">
              <span class="like-name">{{ like.name }}</span>
              <span v-if="index < moment.likes.length - 1">、</span>
            </span>
          </div>
        </div>

        <!-- 评论 -->
        <div v-if="moment.comments && moment.comments.length > 0" class="comments-section">
          <div v-for="comment in moment.comments" :key="comment.id" class="comment-item" @click="replyToComment(moment, comment)">
            <span class="comment-user">{{ comment.user.name }}</span>
            <span v-if="comment.pid!=0" class="reply-to"> @ {{ comment.pUsername }}</span>
            <span class="comment-text">：{{ comment.text }}</span>
          </div>
        </div>

        <!-- 评论输入 -->
        <div v-if="moment.showCommentInput" class="comment-input-section">
          <input 
            v-model="moment.newComment" 
            type="text" 
            :placeholder="moment.replyToComment ? `@${moment.replyToComment.user.name}:` : '说点什么...'" 
            class="comment-input"
            @keyup.enter="addComment(moment)"
            @blur="hideCommentInput(moment)"
            ref="commentInput"
          />
          <button @click="addComment(moment)" @mousedown.prevent class="send-btn">发送</button>
        </div>
      </div>
    </div>

    <!-- 加载更多按钮 -->
    <div v-if="hasMore || loading" class="load-more-section">
      <button 
        v-if="hasMore && !loading" 
        @click="loadMore" 
        class="load-more-btn"
      >
        加载更多
      </button>
      <div v-if="loading" class="loading-text">
        加载中...
      </div>
    </div>

    <!-- 没有更多数据提示 -->
    <div v-if="!hasMore && moments.length > 0" class="no-more-text">
      没有更多内容了
    </div>

    <!-- 图片预览 -->
    <el-image-viewer 
      v-if="imagePreview.visible"
      :url-list="imagePreview.urlList"
      :initial-index="imagePreview.initialIndex"
      @close="closeImagePreview"
      teleported
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import api from '@/utils/http'

interface User {
  id: number
  name: string
  avatar: string
}

interface Comment {
  id: number
  user: User
  text: string
  replyTo?: string
  pid?: number
  pUserId?: number
  pUsername?: string
}

interface Moment {
  id: number
  user: User
  text?: string
  images?: string[]
  video?: string
  videoPoster?: string
  location?: string
  time: string
  likes: User[]
  comments: Comment[]
  isLiked: boolean
  showCommentInput: boolean
  newComment: string
  type?: number
  fileUrl?: string
  replyToComment?: Comment | null
}

// 数据状态
const moments = ref<Moment[]>([])
const currentPage = ref(1)
const pageSize = ref(10)
const hasMore = ref(true)
const loading = ref(false)
const userId = ref() 
const userName = ref('') 
const avatar = ref('') 

// 未读消息状态
const unreadMessage = ref({
})

// 路由
const router = useRouter()

// 跳转到发布页面
const goToPost = () => {
  router.push('/postMoment')
}

// 返回上一页
const goBack = () => {
  router.push("/discover")
}

// 处理未读消息点击
const handleUnreadMessageClick = () => {
  router.push('/momentNotice')
}

// 格式化时间
const formatTime = (dateString: string): string => {
  const date = new Date(dateString)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  
  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  
  if (minutes < 60) {
    return `${minutes}分钟前`
  } else if (hours < 24) {
    return `${hours}小时前`
  } else {
    return `${days}天前`
  }
}

// 转换后端数据为前端格式
const transformMomentData = (backendData: any): Moment => {
  const moment: Moment = {
    id: backendData.id,
    user: {
      id: backendData.userId,
      name: backendData.username,
      avatar: backendData.avatar || 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=50&h=50&fit=crop&crop=face'
    },
    text: backendData.title,
    time: formatTime(backendData.createTime),
    likes: backendData.likeUserList?.map((like: any) => ({
      id: like.userId,
      name: like.username,
      avatar: like.avatar || 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=30&h=30&fit=crop&crop=face'
    })) || [],
    comments: backendData.commentList?.map((comment: any) => ({
      id: comment.id,
      user: {
        id: comment.userId,
        name: comment.username,
        avatar: comment.avatar || 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=30&h=30&fit=crop&crop=face'
      },
      text: comment.content,
      replyTo: comment.pusername,
      pid: comment.pid,
      pUserId: comment.puserId,
      pUsername: comment.pusername
    })) || [],
    isLiked: backendData.isLike === 1,
    showCommentInput: false,
    newComment: '',
    type: backendData.type,
    fileUrl: backendData.fileUrl,
    location: backendData.address,
    replyToComment: null
  }

  // 处理文件URL
  if (backendData.type === 1 && backendData.fileUrl) {
    // 图片类型
    moment.images = backendData.fileUrl.split(',').filter((url: string) => url.trim())
  } else if (backendData.type === 2 && backendData.fileUrl) {
    // 视频类型
    moment.video = backendData.fileUrl
  }

  return moment
}

// 获取朋友圈列表
const loadMoments = async (page: number = 1, isLoadMore: boolean = false) => {
  if (loading.value) return
  
  loading.value = true
  try {
    const response = await api.get('/moments/moment/public', {
      params: {
        pageNo: page,
        pageSize: pageSize.value,
        userId: userId.value
      }
    })
    
    if (response.data && response.data.code === 200) {
      userName.value = response.data.data.username
      avatar.value = response.data.data.avatar
      const pageData = response.data.data.momentItemList
      const newMoments = pageData.records.map(transformMomentData)
      
      if (isLoadMore) {
        moments.value.push(...newMoments)
      } else {
        moments.value = newMoments
      }
      
      hasMore.value = pageData.current < pageData.pages
      currentPage.value = pageData.current
    }
  } catch (error) {
    console.error('加载朋友圈失败:', error)
  } finally {
    loading.value = false
  }
}

// 加载更多
const loadMore = async () => {
  if (hasMore.value && !loading.value) {
    await loadMoments(currentPage.value + 1, true)
  }
}

// 图片预览相关
const imagePreview = reactive({
  visible: false,
  urlList: [] as string[],
  initialIndex: 0
})

// 预览图片
const previewImages = (images: string[], index: number) => {
  imagePreview.urlList = images
  imagePreview.initialIndex = index
  imagePreview.visible = true
}

// 关闭图片预览
const closeImagePreview = () => {
  imagePreview.visible = false
}

// 获取图片网格样式类
const getImageGridClass = (count: number): string => {
  if (count === 1) return 'grid-single'
  if (count === 2) return 'grid-double'
  if (count === 4) return 'grid-four'
  if (count > 3) return 'grid-full-width'
  return 'grid-multiple'
}

// 点赞功能
const toggleLike = async (moment: Moment) => {
  try {
    if (moment.isLiked) {
      // 取消点赞
      const response = await api.delete(`/moments/likes/unlikeMoment/${moment.id}/${userId.value}`)
      if (response.data && response.data.code == 200) {
        moment.isLiked = false
        // 从点赞列表中移除当前用户
        moment.likes = moment.likes.filter(like => like.id != userId.value)
      }
    } else {
      // 点赞
      const response = await api.post(`/moments/likes/likeMoment/${moment.id}/${userId.value}`)
      if (response.data && response.data.code == 200) {
        moment.isLiked = true
        // 添加当前用户到点赞列表
        const currentUser = {
          id: userId.value,
          name: userName.value,
          avatar: avatar.value
        }
        if (!moment.likes.find(like => like.id == userId.value)) {
          moment.likes.unshift(currentUser)
        }
      }
    }
  } catch (error) {
    console.error('点赞操作失败:', error)
  }
}

// 显示评论输入框
const showCommentInput = (moment: Moment) => {
  moment.showCommentInput = !moment.showCommentInput
  moment.replyToComment = null
  if (moment.showCommentInput) {
    setTimeout(() => {
      const input = document.querySelector('.comment-input') as HTMLInputElement
      input?.focus()
    }, 100)
  }
}

// 隐藏评论输入框
const hideCommentInput = (moment: Moment) => {
  // 使用 setTimeout 避免与点击发送按钮冲突
  setTimeout(() => {
    moment.showCommentInput = false
    moment.replyToComment = null
  }, 150)
}

// 回复评论
const replyToComment = (moment: Moment, comment: Comment) => {
  moment.replyToComment = comment
  moment.showCommentInput = true
  setTimeout(() => {
    const input = document.querySelector('.comment-input') as HTMLInputElement
    input?.focus()
  }, 100)
}


// 添加评论
const addComment = async (moment: Moment) => {
  if (!moment.newComment.trim()) return
  try {
    const commentData = {
      momentId: moment.id,
      userId: userId.value,
      content: moment.newComment.trim(),
      pid: moment.replyToComment ? moment.replyToComment.id : 0,
      pUserId: moment.replyToComment ? moment.replyToComment.user.id : undefined,
      pUsername: moment.replyToComment ? moment.replyToComment.user.name : undefined
    }
    
    const response = await api.post('/moments/comment/publish', commentData)
    
    if (response.data && response.data.code === 200) {
      // 添加评论到本地列表
      const newComment: Comment = {
        id: Date.now(), 
        user: {
          id: userId.value,
          name: userName.value,
          avatar: avatar.value
        },
        text: moment.newComment.trim(),
        replyTo: moment.replyToComment ? moment.replyToComment.user.name : undefined,
        pid: moment.replyToComment ? moment.replyToComment.id : 0,
        pUserId: moment.replyToComment ? moment.replyToComment.user.id : undefined,
        pUsername: moment.replyToComment ? moment.replyToComment.user.name : undefined
      }
      moment.comments.push(newComment)
      moment.newComment = ''
      moment.showCommentInput = false
      moment.replyToComment = null
    }
  } catch (error) {
    console.error('发布评论失败:', error)
  }
}
const getUnReadNum = async () => {
  const response = await api.get('/moments/notice/noticeRead/'+userId.value)
  if (response.data) {
    unreadMessage.value =  response.data.data
  }
}

const toUserPage = (userId: number) => {
  router.push(`/userMoments?userId=${userId}`)
}

const getUserIdFromToken = (token: string) => {
  if (!token) return '';
  try {
    const payloadBase64 = token.split('.')[1];
    const decoded = JSON.parse(atob(payloadBase64));
    return decoded.sub; 
  } catch (error) {
    console.error('Token解析失败:', error);
    return '';
  }
};

// 组件挂载时加载数据
onMounted(() => {
  const token = localStorage.getItem('token');
  if (!token) {
    ElMessage.warning('未检测到登录态，请先登录');
    return;
  }
  userId.value = getUserIdFromToken(token);
  loadMoments()
  getUnReadNum()
})


</script>

<style scoped>
.moments-container {
  min-height: 100vh;
}

/* 顶部样式 */
.moments-header {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.header-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 顶部操作 */
.header-actions {
  position: fixed;
  top: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  z-index: 100;
  pointer-events: none;
}

.header-actions .header-btn {
  pointer-events: auto;
}

.header-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  color: white;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  backdrop-filter: blur(10px);
}

.header-btn:hover {
  background: rgba(0, 0, 0, 0.5);
}

.header-btn i {
  font-style: normal;
}

.user-info {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px;
  margin-top: -40px;
  margin-bottom: 20px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  margin-right: 12px;
  border: 2px solid white;
}

.username {
  font-size: 18px;
  font-weight: 500;
}

/* 未读消息提示 */
.unread-message-tip {
  background: rgba(0, 0, 0, 0.7);
  margin: 8px auto;
  padding: 10px 16px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s;
  width: fit-content;
  max-width: 240px;
}

.unread-message-tip:hover {
  background: rgba(0, 0, 0, 0.8);
}

.message-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
  flex-shrink: 0;
}

.message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-content {
  flex: 1;
  min-width: 0;
}

.message-text {
  font-size: 14px;
  color: white;
  font-weight: 400;
  white-space: nowrap;
}

.message-arrow {
  display: none;
}

/* 朋友圈列表 */
.moments-list {
  padding: 0 16px;
  padding-top: 0;
}

.moment-item {
  background: white;
  margin-bottom: 8px;
  padding: 16px;
  border-radius: 0;
  position: relative;
}

.moment-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: #f0f0f0;
}

.moment-item:last-child::after {
  display: none;
}

/* 用户信息 */
.moment-user {
  display: flex;
  align-items: flex-start;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  margin-right: 12px;
  flex-shrink: 0;
}

.user-details {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-size: 16px;
  font-weight: 500;
  color: #576b95;
}

.text-content {
  font-size: 16px;
  line-height: 1.4;
  color: #333;
  white-space: pre-wrap;
}

/* 内容 */
.moment-content {
  margin-left: 52px;
  margin-bottom: 12px;
}

/* 图片网格 */
.images-grid {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
}

.grid-single {
  grid-template-columns: 1fr;
  max-width: 200px;
}

.grid-double {
  grid-template-columns: 1fr 1fr;
  max-width: 300px;
}

.grid-four {
  grid-template-columns: 1fr 1fr;
  max-width: 300px;
}

.grid-multiple {
  grid-template-columns: repeat(3, 1fr);
  max-width: 300px;
}

.grid-full-width {
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  max-width: none;
}

.image-item {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s;
  width: 100%;
  height: 100%;
}

.image-item:hover {
  transform: scale(0.95);
}

.image-item :deep(.el-image) {
  width: 100%;
  height: 100%;
}

.image-item :deep(.el-image img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 视频 */
.video-content {
  max-width: 300px;
  margin-bottom: 8px;
}

.video-content video {
  width: 100%;
  border-radius: 4px;
}

/* 位置 */
.location-info {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #576b95;
  margin-top: 8px;
  max-width: 100%;
  overflow: hidden;
}

.location-info span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.location-icon {
  margin-right: 4px;
}

/* 底部 */
.moment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  margin-left: 52px;
}

.moment-time {
  font-size: 12px;
  color: #999;
}

.moment-actions {
  display: flex;
  gap: 16px;
}

.action-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
  transition: transform 0.2s;
}

.action-btn:hover {
  transform: scale(1.1);
}

.like-icon {
  font-size: 18px;
  color: #666;
  transition: color 0.2s;
}

.like-icon.liked {
  color: #ff6b6b;
}

.comment-icon {
  font-size: 18px;
  color: #666;
}

/* 点赞区域 */
.likes-section {
  display: flex;
  align-items: center;
  margin-top: 12px;
  margin-left: 52px;
  padding: 8px 12px;
  background: #f7f7f7;
  border-radius: 4px;
  font-size: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

.likes-display-icon {
  font-size: 14px;
  color: #ff6b6b;
  margin-right: 4px;
}

.likes-text {
  color: #576b95;
}

.like-name {
  cursor: pointer;
}

.like-name:hover {
  text-decoration: underline;
}

/* 评论区域 */
.comments-section {
  margin-top: 8px;
  margin-left: 52px;
  padding: 8px 12px;
  background: #f7f7f7;
  border-radius: 4px;
}

.comment-item {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 4px;
  cursor: pointer;
  padding: 2px 0;
  border-radius: 2px;
  transition: background 0.2s;
}

.comment-item:hover {
  background: rgba(87, 107, 149, 0.1);
}

.comment-item:last-child {
  margin-bottom: 0;
}

.comment-user {
  color: #576b95;
  font-weight: 500;
}

.reply-to {
  color: #576b95;
}

.comment-text {
  color: #333;
}

/* 评论输入 */
.comment-input-section {
  display: flex;
  margin-top: 8px;
  margin-left: 52px;
  gap: 8px;
}

.comment-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 20px;
  font-size: 14px;
  outline: none;
}

.comment-input:focus {
  border-color: #576b95;
}

.send-btn {
  padding: 8px 16px;
  background: #576b95;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.send-btn:hover {
  background: #4a5a8a;
}

/* 回复信息 */
.reply-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: #e8f4fd;
  border-radius: 4px;
  font-size: 12px;
  color: #576b95;
  margin-bottom: 8px;
}

.cancel-reply-btn {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.cancel-reply-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* 加载更多 */
.load-more-section {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.load-more-btn {
  padding: 10px 30px;
  background: #576b95;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.load-more-btn:hover {
  background: #4a5a8a;
}

.loading-text {
  color: #999;
  font-size: 14px;
}

.no-more-text {
  text-align: center;
  color: #999;
  font-size: 14px;
  padding: 20px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .moments-header {
    height: 250px;
  }
  
  .header-actions {
    top: 15px;
    left: 15px;
    right: 15px;
    gap: 8px;
  }
  
  .header-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  
  .user-info {
    padding: 0 15px;
    margin-top: -35px;
    margin-bottom: 15px;
  }
  
  .avatar {
    width: 50px;
    height: 50px;
  }
  
  .username {
    font-size: 16px;
  }
  
  .unread-message-tip {
    margin: 8px auto;
    padding: 8px 14px;
    max-width: 200px;
  }
  
  .message-avatar {
    width: 24px;
    height: 24px;
    margin-right: 8px;
  }
  
  .message-text {
    font-size: 13px;
  }
  
  .moments-list {
    padding: 0 8px;
    padding-top: 0;
  }
  
  .moment-item {
    padding: 12px;
  }
  
  .grid-multiple {
    max-width: 250px;
  }
  
  .grid-double {
    max-width: 250px;
  }
  
  .grid-full-width {
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    max-width: calc(100vw - 48px);
  }
  
  .moment-content {
    margin-left: 52px;
  }
  
  .moment-footer {
    margin-left: 52px;
  }
  
  .likes-section {
    margin-left: 52px;
  }
  
  .comments-section {
    margin-left: 52px;
  }
  
  .comment-input-section {
    margin-left: 52px;
  }
  
  .video-content {
    max-width: 250px;
  }
}
</style>
